<!--
 * @Author: xiaoyan
 * @Date: 2021-09-15 16:06:02
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-09-26 16:58:00
 * @Description: home
 * @FilePath: \vue3-ts-demo\src\views\home.vue
-->
<template>
<div class="home">
    {{name}}
    <HelloWorld msg="vue3+vite+typeScript"/>
    <div class="tools">
        <el-button type="primary" @click="editName">改名字</el-button>
    </div>
</div>
</template>
<script setup lang="ts">
import { useStore } from '@/store'
import HelloWorld from "@/components/HelloWorld.vue"
import { computed,ref,reactive} from 'vue'
const store = useStore()
const name = computed(()=>store.state.user.name)
let bgcolor = ref("blue");
const styles = reactive({
    textAlign:"center",
    height:"100%"
});
const editName = ()=>{
    store.commit("SET_NAME","xiaoyan");
    if(bgcolor.value === "blue"){
        bgcolor.value = "red";
    }else{
        bgcolor.value = "blue";
    }
    
}

</script>
<style lang="scss" scoped>
.home{
    text-align:v-bind('styles.textAlign');
    background-color:v-bind(bgcolor);
    height: v-bind('styles.height');
}
.tools{
    margin-top: 30px;
}
</style>